<template>
  <div id="app">
    <!-- 导航栏 -->
    <header class="navbar">
      <div class="navbar-left">
        <h1>气象数据展示</h1>
      </div>
      <div class="navbar-right">
        <!-- 使用 router-link 切换页面 -->
        <router-link to="/">站点展示</router-link>
        <router-link to="/weather-chart">气象图表</router-link>
        <router-link to="/cesium-view">Cesium界面</router-link>

        <!-- 搜索框放在导航栏中 -->
        <div class="search-container">
          <input
              type="text"
              v-model="searchInput"
              @input="filterStationNames"
              placeholder="搜索站名..."
              class="search-input"
          />
          <ul v-if="filteredStations.length" class="search-suggestions">
            <li
                v-for="(station, index) in filteredStations"
                :key="index"
                @click="selectStation(station)"
                class="search-item"
            >
              {{ station['站名'] }}
            </li>
          </ul>
        </div>
      </div>
    </header>

    <!-- 路由组件显示位置 -->
    <router-view></router-view>
  </div>
</template>

<script>
import stationData from '@/data/stationData.json'; // 确保路径正确
import '@/assets/navbar.css'; // 引入外部 CSS 样式

export default {
  name: 'App',
  data() {
    return {
      searchInput: '', // 搜索框输入内容
      filteredStations: [], // 匹配到的站点
    };
  },
  methods: {
    /**
     * 实现站点名的模糊搜索
     */
    prepareStationMap() {
      this.stationMap = {};
      stationData.forEach((station) => {
        this.stationMap[station['区站号']] = {
          name: station['站名'],
          longitude: parseFloat(station['经度']),
          latitude: parseFloat(station['纬度']),
        };
      });
    },
    filterStationNames() {
      const query = this.searchInput.trim().toLowerCase(); // 去除空格并转换为小写
      this.filteredStations = stationData.filter((station) =>
          station['站名'].toLowerCase().includes(query)
      );
    },
    selectStation(station) {
      this.searchInput = station['站名'];
      this.filteredStations = [];
    },
  },
  mounted() {
    this.prepareStationMap(); // 确保 stationMap 正确初始化
  },
};
</script>

<style scoped>
/* 基础样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
